<template>
  <div class="userInfo">
    <div class="userInfo-header">
      <!-- 基本信息 -->
       <el-divider content-position="left">基本信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form :model="form" label-width="100px">
            <el-form-item label="账户">
              <el-input v-model="form.account" readonly />
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="creatorTime" readonly />
            </el-form-item>
            <el-form-item label="上次登录时间">
              <el-input v-model="prevLogTime" readonly />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 视觉分割线 -->
      <el-divider content-position="left">扩展信息</el-divider>

      <!-- 扩展信息 -->
      <el-row>
        <el-col :span="12">
          <el-form ref="dataForm" :model="form2" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户名">
                  <el-input v-model="form2.realName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-select v-model="form2.gender" placeholder="选择性别">
                    <el-option v-for="item in genderOptions" :key="item.enCode" :label="item.fullName"
                      :value="item.enCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文化程度">
                  <el-select v-model="form2.education" placeholder="请选择学历">
                    <el-option v-for="item in educationOptions" :key="item.id" :label="item.fullName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生年月">
                  <el-date-picker v-model="form2.birthday" type="date" placeholder="选择日期"
                    value-format="timestamp" format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话号码">
                  <el-input v-model="form2.telePhone" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮箱">
                  <el-input v-model="form2.email" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="通讯地址">
                  <el-input v-model="form2.postalAddress" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="个性签名">
                  <el-input v-model="form2.signature" type="textarea" :rows="3" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item>
                  <el-button type="primary" @click="dataFormSubmit()">保 存</el-button>
                        <!-- 退出登录按钮 -->
                  <el-button
                    type="danger"
                    icon="el-icon-switch-button"
                    @click="handleLogout"
                    style="margin-top: 32px">
                    退出登录
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { UpdateUser } from '@/api/permission/userSetting'

export default {
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {},
      form2: {
        realName: '',
        signature: '',
        gender: 1,
        education: '',
        birthday: null,
        telePhone: '',
        email: '',
        postalAddress: '',
      },
      certificatesTypeOptions: [],
      educationOptions: [],
      genderOptions: [],
      nationOptions: [],
    }
  },
  computed: {
    creatorTime() {
      return this.jnpf.toDate(this.form.creatorTime)
    },
    prevLogTime() {
      return this.jnpf.toDate(this.form.prevLogTime)
    },
  },
  created() {
    this.getOptions()
    this.getInfo()
  },
  methods: {
    getOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'Education' }).then((res) => {
        this.educationOptions = JSON.parse(JSON.stringify(res))
      })
      this.$store.dispatch('base/getDictionaryData', { sort: 'sex' }).then(res => {
        this.genderOptions = JSON.parse(JSON.stringify(res))
      })
    },
    getInfo() {
      this.form = this.user
      for (let key of Object.keys(this.form2)) {
        this.form2[key] = this.form[key]
      }
    },
    dataFormSubmit() {
      UpdateUser(this.form2).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1500
        })
        this.$store.commit('user/SET_USERINFO_USERNAME', this.form2.realName)
      })
    },
    handleLogout() {
      this.$confirm('您确定要退出应用程序吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.logout()
      }).catch(() => {})
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    }
  }
}
</script>
<style lang="scss" scoped>
.userInfo {
  border-radius: 16px;
  max-width: 900px;
  margin: 32px auto 0 auto;
  min-width: 320px;

  .userInfo-header {
    background: #fffdf7;
    border-radius: 12px;
    padding: 24px 28px 12px 28px;
    box-shadow: 0 2px 8px 0 rgba(200, 180, 120, 0.06);
    margin-bottom: 0;
  }

  .JNPF-el_tabs {
    margin-bottom: 18px;
    .el-tabs__item {
      font-size: 16px;
      color: #a68c5a;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .el-tabs__item.is-active {
      color: #ffb347 !important;
      background: #fffbe6;
      border-radius: 8px 8px 0 0;
    }
    .el-tabs__nav-wrap::after {
      background: none;
    }
  }

  .el-form {
    background: none;
    box-shadow: none;
    padding: 0;
    .el-form-item__label {
      color: #a68c5a;
      font-weight: 500;
      font-size: 15px;
    }
    .el-input, .el-select, .el-date-picker {
      border-radius: 6px !important;
      background: #f6f3ea !important;
    }
    .el-input[readonly] {
      background: #f3e7c9 !important;
      color: #a68c5a;
    }
  }

  .el-button {
    border-radius: 6px !important;
    font-weight: 500;
    font-size: 15px;
    min-width: 96px;
    margin-right: 12px;
  }
  .el-button--primary {
    background: #a68c5a;
    color: #fff;
    border: none;
  }
  .el-button--primary:hover {
    background: #493501;
    color: #fff;
  }
  .el-button--danger {
    background: #a68c5a;
    color: #fff;
    border: none;
  }
  .el-button--danger:hover {
    background: #493501;
    color: #fff;
  }
}

</style>
